<script setup lang="ts">
import type { rowsData, LikeConfig } from '@/types/consult'
import { ref } from 'vue'
const props = defineProps<{
  item: rowsData
}>()
const paramsConfig = ref<LikeConfig>({
  type: 'knowledge',
  id: props.item.id
})
</script>

<template>
  <div class="article-item-page">
    <van-row>
      <van-col :span="4">
        <van-image width="50" height="50" round :src="item.creatorAvatar" />
      </van-col>
      <van-col class="doctor" :span="15">
        <p class="name">{{ item.creatorName }}</p>
        <p class="intro">
          {{ item.creatorHospatalName }} {{ item.creatorDep }}
          {{ item.creatorTitles }}
        </p>
      </van-col>
      <van-col :span="5">
        <DP-like
          round
          plain
          :paramsConfig="paramsConfig"
          :item="item"
        ></DP-like>
      </van-col>
    </van-row>
    <van-row class="body-title">
      <p>{{ item.title }}</p>
    </van-row>
    <van-row class="body-content">
      <p>
        <!-- {{ item.content.replace(/<[^>]+>/g, '') }} -->
        {{ item.content.replace(/<[^<>]+>/g, '') }}
      </p>
    </van-row>
    <van-row class="imgs" gutter="10">
      <van-col v-for="(url, index) in item.coverUrl" :key="index">
        <van-image width="100" height="100" :src="url" fit="cover" />
      </van-col>
    </van-row>
    <van-row class="count" gutter="15">
      <van-col>
        <p>{{ item.collectionNumber }} 收藏</p>
      </van-col>
      <van-col>
        <p>{{ item.commentNumber }} 评论</p>
      </van-col>
    </van-row>
  </div>
</template>

<style lang="scss" scoped>
.article-item-page {
  margin: 14px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebedf0;
  .van-row {
    align-items: center;
  }
  .doctor {
    display: flex;
    justify-content: center;
    flex-direction: column;
    .intro {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: var(--cp-tip);
      font-size: 13px;
    }
  }
  .btn {
    width: 70px;
    height: 26px;
    padding: 0 12px;
    font-size: 14px;
  }
  .body-title {
    font-size: 15px;
    font-weight: 500;
    margin: 5px 0;
  }
  .body-content {
    font-size: 14px;
    color: var(--cp-text3);
    line-height: 28px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis; /*加不加这一行都会省略号结尾*/
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .imgs {
    margin-top: 5px;
    .van-image {
      :deep() {
        .van-image__img {
          border-radius: 8px;
        }
      }
    }
  }
  .count {
    color: var(--cp-tip);
    font-size: 12px;
    margin-top: 5px;
  }
}
</style>
